<template>
  <div class="app">
    <header>
     <h1>欢迎使用Sosi接口测试平台</h1>
    </header>  
    <div class="container-request">
      <header>
        <h3>接口请求</h3>
      </header>
      <label for="request-type">请求类型：</label>
      <select v-model="method" id="methodSelect">
        <option value="GET">GET</option>
        <option value="POST">POST</option>
      </select>
      <input type="text" v-model="url" placeholder="请输入请求的URL">
      <button @click="sendRequest">发送</button>    
      <div v-if="method === 'POST'">
        <textarea v-model="requestBody" placeholder="输入请求体" rows="5"></textarea>
      </div>
    </div>
    <div class="container-response">
      <header>
        <h3>响应结果</h3>
      </header>   
      <div id="response">{{ responseData }}</div>
      <!--<pre>{{ responseData }}</pre>-->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      method: 'GET',
      url: '',
      responseData: ''
    };
  },
  methods: {
    sendRequest() {
      const requestOptions = {
        method: this.method,
        headers: {
          // 设置请求头，根据具体接口需要设置
          'Content-Type': 'application/json'
        },
        // 设置请求体，根据具体接口需要设置
        body: JSON.stringify({ key: 'value' })
      };

      fetch(this.url, requestOptions)
        .then(response => response.text())
        .then(data => {
          this.responseData = data;
        })
        .catch(error => {
          this.responseData = '请求失败：' + error;
        });
    }
  }
};
</script>

<style scoped>
.app {
  /* 添加其他样式来美化页面 */
  background-image: url('C:\E\inventory\Picture\interface\001.jpg');
  
}
header {
  text-align: center;
  padding: 5px;
}
.container-request {
  max-width: 850px;
  margin: 50px auto;
  padding: 10px;
  border: 1px solid #cccccc75;
  border-radius: 5px;
  background-color: #f9f9f968;
}
.container-response {
  max-width: 850px;
  margin: 50px auto;
  padding: 10px;
  border: 1px solid #cccccc7e;
  border-radius: 5px;
  background-color: #f9f9f97e;
}

input[type="text"] {
  width: 70%;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #cccccc24;
  border-radius: 5px;
}

select {
  padding: 10px;
  margin-right: 10px;
}

button {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background-color: #007bff90;
  color: #ffffff83;
  cursor: pointer;
}

textarea {
  width: 840px;
  margin: 5px 0;
  padding: 5px;
}

#response {
  margin-top: 20px;
}
</style>